<template>
  <div class="page-baskets">
    <div class="bas-item" v-for="(item,index) in items" :key="index+''">
      <div class="bas-item-title">{{item.title+"("+item.total+")"}}</div>
      <div class="bas-item-con">
        <div class="p1">
          <div class="input-con">
            <a-input v-model="item.amount"/>
          </div>
          <div class="per-con" v-if="item.isPer">
            <a-radio-group v-model="item.per" @change="onChangePer">
              <a-radio-button v-for="value in pers" :key="value+''" :value="value*0.01">
                {{value}} %
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div class="p2">
          <a-button @click="execute(item)">{{item.btn}}</a-button>
        </div>
      </div>
    </div>

    <div style="margin: 2rem 0;">
      <div>cheese balance : </div>
      <div>{{cheese_balance}}</div>
    </div>
  </div>
</template>


<script>
  import {toFixed4, trace} from "../../../utils/tools"
  import {getStakePools,getUserStakeInfo,userStake,userUnstake,userClaim,approvePoolToken,getPoolAllowance,getTokenAddress} from  "cheese-sdk"
  import {mapGetters} from "vuex"
  import {getBalanceToken} from "../../../api/user"

  export default {
    components: {},
    props: {},
    data() {
      return {
        cheese_balance: "",
        pers: [10, 25, 50, 75, 100],
        items: [
          {
            title: "AMOUNT TO STAKE",
            amount: "",
            btn: "STAKE",
            isPer: true,
            per:"",
            id: 1,
            total: 0,

          },
          {
            title: "AMOUNT TO UNSTAKE",
            amount: "",
            btn: "UNSTAKE",
            isPer: true,
            per:"",
            id: 2,
            total: 0,
          },
          {
            title: "AVAILABLE REWARDS TO CLAIM",
            amount: "",
            btn: "CLAIM",
            isPer: false,
            per:"",
            id: 3,
            total: 0,
          },
        ],

        poolInfo: [],
        curPool: {},
      };
    },
    methods: {
      onChangePer(e) {
        trace(`checked = ${e.target.value}`, this.curPer);
      },

      execute(item) {
        if (item.id == "1") {   //stake
          trace(this.curPool.id, item)

          if (this.curPool.token.allowance <item.amount) {
            approvePoolToken("",this.curPool.token.token,"cheese", (code, hash) => {
              trace("approvePoolToken-",this.curPool.token.symbol, code, hash);
              if (code == 1) {
                this.checkInfo();
              }
            });
            return;
          }

          userStake(this.curPool.id, item.amount, (code, hash) => {
            trace("userStake", code, hash)
            if (code == 1) {
              this.checkInfo();
            }

          })

        } else if (item.id == "2") {   //unstake
          userUnstake(this.curPool.id, item.amount, (code, hash) => {
            trace("userUnstake", code, hash)
            if (code == 1) {
              this.checkInfo();
            }
          })

        } else if (item.id == "3") {   //claim
          userClaim(this.curPool.id, (code, hash) => {
            trace("userClaim", code, hash)
            if (code == 1) {
              this.checkInfo();
            }
          })
        }

      },

      async checkInfo() {
        this.poolInfo = (await getStakePools()).data;
        let {symbol,token,pid} = this.poolInfo[1];
        this.curPool = (await getUserStakeInfo(pid)).data;
        this.curPool.token = {symbol,token,pid};
        this.curPool.id = pid;
        this.curPool.token.balance = toFixed4(await getBalanceToken(this.curPool.token.token));
        this.curPool.token.allowance = toFixed4(await getPoolAllowance("",this.curPool.token.token,"cheese"));

        this.items[0].total = this.curPool.token.balance;
        this.items[1].total = this.curPool.amount;
        this.items[2].total = this.curPool.income;
        this.items[2].amount = this.curPool.income;

        trace("checkInfo",this.poolInfo,this.curPool)
        let address = getTokenAddress("CHEESE");
        this.cheese_balance = await getBalanceToken(address);
      }

    },
    watch: {
      account(){
        if(this.isLogin){
          this.checkInfo();
        }
      },
      $route(to, from) {
        if (to.path.indexOf("cheese") > 0) {
          if (this.isLogin) {
            this.checkInfo();
          }
        }
      },
    },
    computed: {
      ...mapGetters(["isLogin","account"]),
    },

    mounted() {
      if(this.isLogin){
        this.checkInfo();
      }
    },
  };
</script>
<style lang="less" scoped>

  .page-baskets {
    position: relative;
    width: 760px;
    margin: 1rem auto;

    .bas-item {
      position: relative;
      border-bottom: 1px solid #424141;
      margin: 1rem 0;

      .bas-item-con {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .p1 {
          width: 60%;
        }

        .p2 {
          width: 20%;
        }
      }


      .per-con {
        text-align: center;
        margin: 2rem 0;
        background: #FFFFFF;
        box-shadow: 0px 0px 0px 1px #EAEAEA;
        border-radius: 35px;
        padding: 10px;

        .ant-radio-group {
          width: 100%;
        }
      }

      .input-con {
        margin: 1rem 0;
      }
    }
  }


</style>
